<div class="content-section introduction">
    <div class="feature-intro">
        <h1>Ripple</h1>
        <p>Ripple directive adds ripple effect to the host element.</p>
    </div>
</div>

<div class="content-section implementation">
    <div class="card-container p-d-flex">
        <div class="card primary-box" pRipple>Default</div>
        <div class="card styled-box-green" pRipple>Green</div>
        <div class="card styled-box-orange" pRipple>Orange</div>
        <div class="card styled-box-purple" pRipple>Purple</div>
    </div>
</div>

<div class="content-section documentation">
    <p-tabView>
        <p-tabPanel header="Documentation">
            <h5>Import</h5>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123;RippleModule&#125; from 'primeng/ripple';
</app-code>

            <h5>Getting Started</h5>
            <p>Ripple is an optional animation for the supported components such as buttons. It is disabled by default and needs to be enabled globally at your main component e.g. app.component.ts by injecting
                <i>PrimeNGConfig</i>.</p>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123; PrimeNGConfig &#125; from 'primeng/api';

@Component(&#123;
    selector: 'app-root',
    templateUrl: './app.component.html'
&#125;)
export class AppComponent implements OnInit &#123;

    constructor(private primengConfig: PrimeNGConfig) &#123;&#125;

    ngOnInit() &#123;
        this.primengConfig.ripple = true;
    &#125;

&#125;
</app-code>

            <h5>Directive</h5>
            <p>Ripple is applied by adding the <i>pRipple</i> directive to the host.</p>
                    
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;div pRipple&gt;&lt;/div&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
export class ModelComponent &#123;

    val: number;

&#125;
</app-code>

            <h5>Styling</h5>
            <p>Default styling of the animation adds a shade of white. This can easily be customized using css that changes the color of <i>.p-ink</i> element.</p>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;div pRipple class="purple" &gt;&lt;/div&gt;
</app-code>

<app-code lang="css" ngNonBindable ngPreserveWhitespaces>
.p-ripple.purple .p-ink &#123;
    background: rgba(256,39,176,.3);
&#125;
</app-code>

                    <h5>Styling</h5>
                    <div class="doc-tablewrapper">
                        <table class="doc-table">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Element</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>p-ripple</td>
                                    <td>Host element.</td>
                                </tr>
                                <tr>
                                    <td>p-ink</td>
                                    <td>Ripple element.</td>
                                </tr>
                                <tr>
                                    <td>p-ink-active</td>
                                    <td>Ripple element during animating.</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <h5>Dependencies</h5>
                    <p>None.</p>
                </p-tabPanel>

                <p-tabPanel header="Source">
                    <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/ripple" class="btn-viewsource" target="_blank">
                        <span>View on GitHub</span>
                    </a>
                    <a href="https://stackblitz.com/edit/primeng-ripple-demo" class="btn-viewsource" style="margin-left: .5em;" target="_blank">
                        <span>Edit in StackBlitz</span>
                    </a>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;div class="card-container p-d-flex"&gt;
    &lt;div class="card primary-box" pRipple&gt;Default&lt;/div&gt;
    &lt;div class="card styled-box-green" pRipple&gt;Green&lt;/div&gt;
    &lt;div class="card styled-box-orange" pRipple&gt;Orange&lt;/div&gt;
    &lt;div class="card styled-box-purple" pRipple&gt;Purple&lt;/div&gt;
&lt;/div&gt;
</app-code>

<app-code lang="css" ngNonBindable ngPreserveWhitespaces>
:host ::ng-deep .card-container &#123;
    .card &#123;
        width: 75px;
        height: 75px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 1rem;
        user-select: none;
        padding: 0;

        &.primary-box &#123;
            background-color: var(--primary-color);
            padding: 0;
            color: var(--primary-color-text);
        &#125;

        &.styled-box-green &#123;
            .p-ink &#123;
                background: rgba(#4baf50, 0.3);
            &#125;
        &#125;

        &.styled-box-orange &#123;
            .p-ink &#123;
                background: rgba(#ffc106, 0.3);
            &#125;
        &#125;

        &.styled-box-purple &#123;
            .p-ink &#123;
                background: rgba(#9c27b0, 0.3);
            &#125;
        &#125;

        &:last-child &#123;
            margin-right: 0;
        &#125;
    &#125;
&#125;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
export class Ripple &#123;

&#125;
</app-code>
                </p-tabPanel>
                <p-tabPanel header="StackBlitz">
                    <ng-template pTemplate="content">
                        <iframe src="https://stackblitz.com/edit/primeng-ripple-demo?embed=1" style="width: 100%; height: 768px; border: none;"></iframe>
                    </ng-template>
                </p-tabPanel>
            </p-tabView>
        </div>